import React, { useState, useEffect } from 'react';
import axios from 'axios';

// 执行人映射（保持原有逻辑）
const EXECUTOR_MAP = {
  '1': '李医生',
  '2': '张医生',
  '3': '王医生',
  'default': '未知执行人'
};

// 结果状态标签配置：更柔和的配色，适配精致风格
const RESULT_STATUS = {
  '正常': { color: '#15803d', bg: '#f0fdf4', border: '#bbf7d0' },
  '异常': { color: '#b91c1c', bg: '#fee2e2', border: '#fecaca' },
  '待复查': { color: '#b45309', bg: '#fffbeb', border: '#fde68a' },
  '已完成': { color: '#1d4ed8', bg: '#eff6ff', border: '#bfdbfe' },
  'default': { color: '#64748b', bg: '#f8fafc', border: '#e2e8f0' }
};

// 精致风格样式变量（调整列表布局，支持多卡片展示）
const styles = {
  container: {
    maxWidth: 1100,
    margin: '0 auto',
    padding: '16px 12px',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
  },
  header: {
    marginBottom: 16,
    paddingBottom: 12,
    borderBottom: '1px solid #f5f5f5'
  },
  title: {
    fontSize: 20,
    fontWeight: 600,
    color: '#1e293b',
    margin: '0 0 8px 0',
    display: 'flex',
    alignItems: 'center',
    gap: 6
  },
  subtitle: {
    fontSize: 12,
    color: '#3b82f6',
    margin: '0 0 14px 0',
    display: 'flex',
    alignItems: 'center',
    gap: 4
  },
  updateTime: {
    fontSize: 12,
    color: '#718096',
    margin: '0 0 14px 0',
    display: 'flex',
    alignItems: 'center',
    gap: 4
  },
  // 加载状态
  loadingContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: 320,
    gap: 12
  },
  loader: {
    width: 36,
    height: 36,
    border: '3px solid #f3f4f6',
    borderTop: '3px solid #3b82f6',
    borderRadius: '50%',
    animation: 'spin 1s linear infinite'
  },
  loadingText: {
    fontSize: 14,
    color: '#64748b'
  },
  // 错误状态
  errorContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: 320,
    gap: 16,
    padding: '0 20px',
    textAlign: 'center'
  },
  errorText: {
    fontSize: 14,
    color: '#dc2626',
    display: 'flex',
    alignItems: 'center',
    gap: 6
  },
  retryBtn: {
    padding: '9px 18px',
    backgroundColor: '#3b82f6',
    color: 'white',
    border: 'none',
    borderRadius: 6,
    fontSize: 12,
    fontWeight: 500,
    cursor: 'pointer',
    transition: 'all 0.2s ease',
    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
    '&:hover': {
      backgroundColor: '#2563eb',
    },
    '&:active': {
      transform: 'scale(0.98)'
    }
  },
  // 列表：网格布局，支持多卡片
  checkList: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
    gap: 14,
    marginTop: 6
  },
  // 卡片样式
  checkItemCard: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 14,
    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.03)',
    transition: 'all 0.2s ease',
    border: '1px solid #fafafa',
    position: 'relative'
  },
  // 最大TID标识（顶部角标）
  maxTidBadge: {
    position: 'absolute',
    top: 8,
    right: 8,
    fontSize: 10,
    color: 'white',
    backgroundColor: '#3b82f6',
    padding: '2px 6px',
    borderRadius: 4,
    fontWeight: 500
  },
  cardHover: {
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.05)',
    borderColor: '#f0f9ff'
  },
  itemTid: {
    fontSize: 11,
    color: '#718096',
    marginBottom: 8,
    display: 'flex',
    alignItems: 'center',
    gap: 4
  },
  itemHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
    gap: 8
  },
  itemName: {
    fontSize: 15,
    fontWeight: 600,
    color: '#1e293b',
    margin: 0,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  },
  itemDepartment: {
    fontSize: 11,
    backgroundColor: '#f1f5f9',
    color: '#3b82f6',
    padding: '2px 8px',
    borderRadius: 12,
    whiteSpace: 'nowrap'
  },
  itemCore: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    marginBottom: 10
  },
  coreItem: {
    display: 'flex',
    alignItems: 'center',
    gap: 6,
    flexWrap: 'wrap'
  },
  coreLabel: {
    fontSize: 12,
    color: '#718096',
    minWidth: 60
  },
  coreValue: {
    fontSize: 12,
    fontWeight: 500,
    padding: '4px 10px',
    borderRadius: 4,
    border: '1px solid transparent'
  },
  itemDetails: {
    fontSize: 12,
    color: '#718096',
    paddingTop: 8,
    borderTop: '1px solid #f8fafc',
    display: 'flex',
    alignItems: 'center',
    gap: 4
  },
  // 无数据状态
  noDataContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: 240,
    gap: 12,
    backgroundColor: '#f8fafc',
    borderRadius: 8,
    padding: 16,
    textAlign: 'center',
    gridColumn: '1 / -1' // 占满整个网格宽度
  },
  noDataIcon: {
    fontSize: 36,
    color: '#94a3b8'
  },
  noDataText: {
    fontSize: 14,
    color: '#64748b'
  }
};

const CheckResultPage = () => {
  const [maxTidItems, setMaxTidItems] = useState([]); // 存储所有 tid 最大的项
  const [maxTidValue, setMaxTidValue] = useState(null); // 存储最大的 tid 数值
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [hoveredCard, setHoveredCard] = useState('');

  // 页面加载时获取数据并筛选最大 tid 相关项
  useEffect(() => {
    fetchMaxTidData();
  }, []);

  // 核心逻辑：获取数据 + 筛选所有 tid 最大的项
  const fetchMaxTidData = async () => {
    try {
      setLoading(true);
      const response = await axios.get('http://localhost:5044/api/Ganyux/chay1', {
        headers: { accept: 'text/plain' }
      });

      // 验证数据有效性
      if (response.data?.state !== 200 || response.data?.code !== '1') {
        setError('数据获取失败，请稍后重试');
        return;
      }

      const dataList = Array.isArray(response.data.data) ? response.data.data : [];
      if (dataList.length === 0) {
        setMaxTidItems([]);
        setMaxTidValue(null);
        return;
      }

      // 步骤1：计算最大的 tid 数值（兼容字符串类型、缺失值）
      const maxTid = dataList.reduce((max, item) => {
        const currentTid = Number(item?.tid) || -Infinity;
        return Math.max(max, currentTid);
      }, -Infinity);

      // 步骤2：筛选出所有 tid 等于最大值的项（多个项一起保留）
      const allMaxTidItems = dataList.filter(item => {
        return Number(item?.tid) === maxTid;
      });

      setMaxTidValue(maxTid);
      setMaxTidItems(allMaxTidItems);
    } catch (err) {
      setError('网络异常，请检查连接');
      console.error('请求失败:', err);
    } finally {
      setLoading(false);
    }
  };

  // 获取结果状态样式
  const getResultConfig = (result) => {
    if (!result) return RESULT_STATUS.default;
    return RESULT_STATUS[result] || RESULT_STATUS.default;
  };

  // 加载中状态
  if (loading) {
    return (
      <div style={styles.container}>
        <div style={styles.loadingContainer}>
          <div style={styles.loader}></div>
          <p style={styles.loadingText}>加载体检结果...</p>
        </div>
      </div>
    );
  }

  // 错误状态
  if (error) {
    return (
      <div style={styles.container}>
        <div style={styles.errorContainer}>
          <p style={styles.errorText}>
            ⚠️ {error}
          </p>
          <button 
            onClick={fetchMaxTidData} 
            style={styles.retryBtn}
          >
            🔄 重试
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={styles.container}>
      {/* 页面头部 */}
      <header style={styles.header}>
       
        {/* 显示最大TID数值和匹配项数量 */}
        {maxTidValue !== null && maxTidValue !== -Infinity && (
          <p style={styles.subtitle}>
            🔍 最大TID：{maxTidValue}（共 {maxTidItems.length} 条记录）
          </p>
        )}
        <p style={styles.updateTime}>
          🕒 最后更新：{new Date().toLocaleString()}
        </p>
      </header>

      {/* 结果展示（展示所有 tid 最大的项） */}
      <div style={styles.checkList}>
        {maxTidItems.length > 0 ? (
          maxTidItems.map((item) => {
            const resultConfig = getResultConfig(item.ckresult);
            const cardKey = item.tid || item.id || Math.random().toString(36).substr(2, 9); // 确保key唯一
            
            return (
              <div
                key={cardKey}
                style={{
                  ...styles.checkItemCard,
                  ...(hoveredCard === cardKey ? styles.cardHover : {})
                }}
                onMouseEnter={() => setHoveredCard(cardKey)}
                onMouseLeave={() => setHoveredCard('')}
              >
                {/* 最大TID角标标识 */}
                <div style={styles.maxTidBadge}>最大TID</div>

                {/* TID显示 */}
                <div style={styles.itemTid}>
                  <span style={{ color: '#94a3b8' }}>🆔</span> TID：{item.tid || '无'}
                </div>

                {/* 检查项名称和科室 */}
                <div style={styles.itemHeader}>
                  <h3 style={styles.itemName} title={item.jname || '未命名检查项'}>
                    {item.jname || '未命名检查项'}
                  </h3>
                  <span style={styles.itemDepartment}>
                    {item.xian || '检查科室'}
                  </span>
                </div>

                {/* 核心信息 */}
                <div style={styles.itemCore}>
                  <div style={styles.coreItem}>
                    <span style={styles.coreLabel}>检查结果：</span>
                    <span 
                      style={{
                        ...styles.coreValue,
                        color: resultConfig.color,
                        backgroundColor: resultConfig.bg,
                        borderColor: resultConfig.border
                      }}
                    >
                      {item.ckresult || '未填写'}
                    </span>
                  </div>
                  <div style={styles.coreItem}>
                    <span style={styles.coreLabel}>执行人：</span>
                    <span style={styles.coreValue}>
                      👨‍⚕️ {item.person || EXECUTOR_MAP.default}
                    </span>
                  </div>
                </div>

                {/* 详情信息 */}
                <div style={styles.itemDetails}>
                  🕒
                  <strong>检查时间：</strong>
                  {item.ckdate ? new Date(item.ckdate).toLocaleString() : '未知时间'}
                </div>
              </div>
            );
          })
        ) : (
          // 无数据状态
          <div style={styles.noDataContainer}>
            <div style={styles.noDataIcon}>📭</div>
            <p style={styles.noDataText}>暂无体检数据</p>
          </div>
        )}
      </div>

      {/* 加载动画样式 */}
      <style>
        {`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}
      </style>
    </div>
  );
};

export default CheckResultPage;